<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/prewimg.css">
		<link href="../../css/mui.picker.min.css" rel="stylesheet" />
		<link href="../../css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/app.min.css" />
		<style type="text/css">
			.mui-bar {
				display: flex;
				align-items: center;
			}
			
			.mui-title {
				font-size: 110%;
				color: #288EFE;
			}
			
			#fabiao {
				background-color: #F7F7F7;
				position: absolute;
				right: 0;
				bottom: 2px;
				font-size: 100%;
				border: 0;
				color: #288EFE;
			}
			
			.mui-pull-left {
				background-color: #F7F7F7;
				margin-left: -3%;
				font-size: 100%;
				border: 0;
				position: absolute;
				bottom: 2px;
				color: #2F91FE;
			}
			
			.mui-content {
				background-color: white;
				overflow: hidden;
				padding-bottom: 8%;
			}
			
			.write-text {
				font-size: 90%;
				overflow-y: hidden;
				border: 1px solid #F0F0F0;
				border-radius: 0;
			}
			
			.chuan-div {
				width: 100%;
				padding-bottom: 5%;
			}
			
			.shangchuan-div {
				width: 30%;
				display: flex;
				flex-wrap: wrap;
				background-color: #EFEFF4;
				justify-content: center;
				font-size: 80%;
				color: #BFBFBF;
				margin-left: 4.5%;
				padding: 5%;
				margin-top: 1%;
			}
			
			.shangxhuan-png {
				width: 100%;
				height: 10%;
			}
			
			#schoolname{
				display: none;
			}
			
			.imgs {
				width: 140%;
				margin-left: -20%;
			}
			
			.img-div {
				width: 30%;
				padding-bottom: 0;
				overflow: hidden;
				border-radius: 4px;
				margin-left: 1%;
			}
			
			.chuanimgsarea {
				width: 100%;
				margin-left: 3.5%;
				display: flex;
				flex-wrap: wrap;
				padding: 0
			}
			
			.divv1 {
				font-size: 90%;
				margin-top: 0;
				display: flex;
				align-items: center;
			}
			
			.adress-div {
				width: 100%;
				padding: 0 3.5%;
				border-top: 1px solid #F0F0F0;
			}
			
			.divv1 textarea {
				width: 93%;
				border: 0;
				color: #000000;
				font-size: 95%;
				margin-bottom: 0;
				max-height: 80%;
				padding-left: 0!important;
			}
			
			#streettext {
				padding-left: 0;
				font-size: 85%;
				margin-bottom: 0;
				border: 0;
			}
			
			.renwu-dv {
				padding-left: 6%;
				border-left: 5px solid #208AFE;
				border-radius: 15px;
				margin-top: 4%;
				margin-left: 3%;
			}
			
			.huo-p {
				color: #208AFE;
				font-size: 100%;
			}
			
			.divv2 {
				font-size: 90%;
				margin-top: 0;
				display: flex;
				align-items: center;
				margin-left: 3%
			}
			
			#toclassiyf {
				padding-top: 8px;
				padding-bottom: 10px;
			}
			
			.divv2 span {
				margin-left: 3%;
			}
			
			.divv2 input {
				width: 70%;
				border: hidden;
				color: #000000;
				font-size: 95%;
				margin-bottom: 0;
				padding-left: 0!important;
				margin-left: 3%;
			}
			
			.switch-div {
				display: flex;
				align-items: center;
				font-size: 90%;
				margin-left: 3.5%;
				padding-bottom: 7px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<button class="mui-action-back mui-pull-left" id="quxiao">取消</button>
			<h1 class="mui-title">商品发布</h1>
			<button type="button" id="fabiao">发布</button>
		</header>

		<div class="mui-content">
			<textarea name="" class="write-text" id="txtContent" rows="2" cols="30" placeholder="请输入产品详细信息...." onkeyup="ResizeTextarea()"></textarea>

			<div id="chuanimgs" class="chuan-div">

				<div id="chuanimgsarea" class="chuanimgsarea">
					<!--存放图片区域-->
				</div>

				<div class="shangchuan-div" id="ctu">
					<img src="../../images/addpto.png" class="shangxhuan-png" />
				</div>
			</div>
			<div class="divv2">价格：<input type="text" id="prise-iput" placeholder="例如：(300元)"></div>
			<div class="divv2" id="toclassiyf">类型：<span id="goodstype"><text style="color: #AAAAAA;">点击获取类型</text></span></div>

			<div class="switch-div" id="switch-div">
				<span>显示学校可增加被搜索机率，是否显示？<span id="schoolname"></span></span>
				<div class="mui-switch mui-switch-blue mui-switch-mini mui-active" id="mySwitch">
					<div class="mui-switch-handle"></div>
				</div>
			</div>

			<div class="adress-div">
				<div class="divv1">
					<textarea rows="1" id="showCityPicker" placeholder="请选择省-市-区"></textarea>
					<img id='showCityPicke' src="../../images/dwei.png" style="width: 6%;">
				</div>
				<textarea id="streettext" rows="1" cols="30" placeholder="输入街道等详细信息"></textarea>
			</div>

			<div class="renwu-dv">
				<p class="huo-p">联系方式</p>
			</div>
			<div class="divv2">手机号码：<input type="text" id="tel-iput" placeholder="输入有效手机号"></div>
			<div class="divv2">咨询账号：<input type="text" id="card-iput" placeholder="默认为自己账号" disabled="true"></div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script src="../../js/mui.previewimage1.js"></script>
		<script src="../../js/mui.zoom.js"></script>
		<script src="../../js/mui.picker.min.js"></script>
		<script src="../../js/mui.poppicker.js"></script>
		<script src="../../js/popover.js"></script>
		<script src="../../js/city.data-3.js"></script>
		<script src="../../js/app.min.js"></script>
		<script src="../../js/immersed.js"></script>
		<script type="text/javascript">
			mui.previewImage();
			mui.init({
				gestureConfig: {
					longtap: true, //默认为false
					hold: true, //默认为false，不监听
					release: true //默认为false，不监听
				}
			});
			var city = '';
			var areea = '';
			//获取地址信息
			mui.ready(function() {
				var _getParam = function(obj, param) {
					return obj[param] || '';
				};
				var cityPicker3 = new mui.PopPicker({
					layer: 3
				});
				cityPicker3.setData(cityData3);
				var showCityPickerimg = document.getElementById('showCityPicke');
				var cityResult3 = document.getElementById('showCityPicker');
				showCityPickerimg.addEventListener('tap', function(event) {
					cityPicker3.show(function(items) {
						cityResult3.value = _getParam(items[0], 'text') + "-" + _getParam(items[1], 'text') + "-" + _getParam(items[2], 'text');
						city = _getParam(items[1], 'text');
						areea = _getParam(items[2], 'text');
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				}, false);
				cityResult3.addEventListener('tap', function(event) {
					cityPicker3.show(function(items) {
						cityResult3.value = _getParam(items[0], 'text') + "-" + _getParam(items[1], 'text') + "-" + _getParam(items[2], 'text');
						city = _getParam(items[1], 'text');
						areea = _getParam(items[2], 'text');
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				}, false);
			})
			//textarea自适应说说高度
			function ResizeTextarea() {
				// 最小高度  
				var minRows = 2;
				// 最大高度，超过则出现滚动条  
				var maxRows = 100;
				var t = document.getElementById('txtContent');
				if(t.scrollTop == 0) t.scrollTop = 1;
				while(t.scrollTop == 0) {
					if(t.rows > minRows)
						t.rows--;
					else
						break;
					t.scrollTop = 1;
					if(t.rows < maxRows)
						t.style.overflowY = "hidden";
					if(t.scrollTop > 0) {
						t.rows++;
						break;
					}
				}
				while(t.scrollTop > 0) {
					if(t.rows < maxRows) {
						t.rows++;
						if(t.scrollTop == 0) t.scrollTop = 1;
					} else {
						t.style.overflowY = "auto";
						break;
					}
				}
			}
			
			//更新用户头像，主要是裁剪页面裁剪完后触发的
			//添加updateHeadImg自定义事件监听
			var imggsarr = [];
			//长安删除图片	    	
			mui(".chuanimgsarea").on('longtap', '.img-div', function() {
				var alllength = document.getElementsByClassName('img-div');
				for(var i = 0; i < alllength.length; i++) {
					alllength[i].id = i;
				}
				var index = this.id;
				plus.nativeUI.actionSheet({
					title: "请选择您的操作",
					cancel: "取消",
					buttons: [{
						title: "删除"
					}]
				}, function(e) {
					if(e.index == 1) {
						for(var i = 0; i < alllength.length; i++) {
							if(index == i) {
								alllength = alllength[i];
								alllength.parentNode.removeChild(alllength);
							}
						}
						if(document.getElementsByClassName('img-div').length) {
							document.getElementById('ctu').style.display = 'block';
						}
						for(var j = 0; j < document.getElementsByClassName('img-div').length; j++) {
							document.getElementsByClassName('img-div')[j].id = j;
						}
					}
				});
			});
			window.addEventListener('updateHeadImg', function(event) {
				var addpng = document.getElementById('ctu');
				var uploadimg = document.getElementsByClassName('img-div');
				mui.plusReady(function() {
					imggsarr[0] = event.detail.img_path;
					var str = template('update-img', {
						"record": imggsarr
					});
					document.getElementById('chuanimgsarea').innerHTML += str;
					if(uploadimg.length == 3) {
						addpng.style.display = 'none';
					}
				});
			});

			window.addEventListener('goods', function(event) {
				document.getElementById('goodstype').textContent = event.detail.goodstypeitem + "  " + event.detail.goodstype;
			})

			mui.plusReady(function() {
				starbar();
				plus.navigator.setStatusBarStyle('dark');
				var data = plus.webview.currentWebview().news;
				document.getElementById('schoolname').textContent = data[0];
				document.getElementById('tel-iput').value = data[1];
				document.getElementById('card-iput').value = data[2];

				var switchflag = plus.webview.currentWebview().news[0];
				var textcolor = document.getElementById('switch-div');
				document.getElementById("mySwitch").addEventListener("toggle", function(event) {
					if(event.detail.isActive) {
						switchflag = plus.webview.currentWebview().news[0]
						textcolor.style.color = 'black';
					} else {
						switchflag = '0';
						textcolor.style.color = '#B0B0B0';
					}
				})

				var old_back = mui.back;
				//重写返回事件
				mui.back = function(){
					var arr1 = [];
					var xxtext = document.getElementById('txtContent');
					var prise = document.getElementById('prise-iput');
					var type = document.getElementById('goodstype');
					var adress = document.getElementById('streettext');
					var aaa = document.getElementsByClassName('img-div');
					for(var i = 0; i < aaa.length; i++) {
						arr1[i] = aaa[i].getElementsByTagName('img')[0].src
					}
	                //判断是否打开图片预览，如果是，就先关掉图片，否则直接关闭当前页面
	                if(document.querySelector(".mui-preview-in")){
	                    mui.previewImage().close();
	                    return;
	                }else if(xxtext.value == "" && arr1 == "" && prise.value == "" && type.textContent == "点击获取类型" && adress.value == "") {
						old_back();
					} else {
						mui.confirm('确认放弃发表？', ['取消', '确认'], function(e) {
							if(e.index == 0) {
								old_back();
							}
						})
					}
	    			
	            }

				//初始化头像，和预览图
				document.getElementById("ctu").addEventListener('tap', function() {
					galleryImg();
				})

				document.getElementById('toclassiyf').addEventListener('tap', function() {
					mui.openWindow({
						url: 'shopclassify.html',
						id: 'shopclassify.html'
					})
				})

				document.getElementById('fabiao').addEventListener('tap', function() {
					var imgfiles = [];
					var xxtext = document.getElementById('txtContent').value;
					var prise = document.getElementById('prise-iput').value;
					var type = document.getElementById('goodstype').textContent;
					var imgs = document.getElementsByClassName('imgs');
					var adress = document.getElementById('streettext').value;
					var tel = document.getElementById('tel-iput').value;
					var card = document.getElementById('card-iput').value;
					for(var i = 0; i < imgs.length; i++) {
						imgfiles += imgs[i].src;
					}
					var imgss = '0';
					var urlpath = '';
					if(imgs.length == 1) {
						imgss = imgfiles;
						console.log(1111111);
						urlpath = 'https://www.lunyuwang.com/taskController/publishGood1'
					} else if(imgs.length == 2) {
						imgss = imgfiles;
						console.log(22222);
						urlpath = 'https://www.lunyuwang.com/taskController/publishGood2'
					} else {
						imgss = imgfiles;
						console.log(33333333);
						urlpath = 'https://www.lunyuwang.com/taskController/publishGood3'
					}
					console.log(xxtext + '---' + prise + '---' + type + '---' + city + '---' + areea + '---' + adress + '---' + tel + '---' + card);
					if(xxtext != '' && prise != '' && type != '' && tel != '' && card != '' && city != '' && areea != '') {
						if(imgs.length < 1) {
							mui.alert('商品图片至少为一张哦');
						} else {
							var btnArray = ['确定', '取消'];
							mui.confirm('确认发布？', btnArray, function(e) {
								if(e.index == 0) {
									mui.ajax(urlpath, {
										data: {
											lygood_Text: xxtext,
											lygood_Price: prise,
											lygood_City: city,
											lygood_Area: areea,
											lygood_Address: adress,
											lygood_Card: card,
											lygood_Collage: switchflag,
											lygood_Tel: tel,
											lygood_Flag: type,
											imgData: imgss
										},
										crossDomain: true, //强制使用5+跨域
										dataType: 'json', //服务器返回json格式数据
										type: 'post', //HTTP请求类型
										timeout: 10000, //超时时间设置为10秒；
										//processData: false,
										headers: {
											'Content-Type': 'application/x-www-form-urlencoded'
										},
										success: function(data) {
											if(data.state == 1) {
												mui.toast('发布成功!');
											} else {
												mui.toast('发布失败!');
											}

										},
										error: function(xhr, type, errorThrown) {
											mui.toast('发布异常!')
										}
									})
								}
							})
						}
					} else {
						mui.alert('除可选填外其余内容不能为空')
					}
				})
			});

			//相册
			function galleryImg() {
				plus.gallery.pick(function(a) {
					plus.io.resolveLocalFileSystemURL(a, function(entry) {　　　　　　 //entry为图片原目录（相册）流
						cutImage(entry.toLocalURL());
					}, function(e) {
						console.log("读取图片错误：" + e.message);
					});
				}, function(a) {}, {
					filter: "image"
				})
			};

			//裁剪背景图片
			function cutImage(path) {
				mui.openWindow({
					url: '../cutbgimg.html',
					id: '../cutimg.html',
					extras: {
						path: path,
					},
					show: {
						aniShow: 'zoom-fade-in',
						duration: 800
					},
					waiting: {
						autoShow: true
					}
				});
			}
		</script>

		<!--图片区域渲染模板-->
		<script type="text/template" id="update-img">
			<% for(var i in record){ var item=record[i]; %>
			<div class="img-div">
				<img src="<%=item%>" id="imgs" class="imgs" data-preview-src="" data-preview-group="0">
			</div>
			<% } %>
		</script>
	</body>

</html>